<template>
    <div class="nav">
        <!-- <van-swipe class="my-swipe" :autoplay="1500" indicator-color="white">
            <van-swipe-item v-for="(item, index) in list" :key="index">
                <img :src="item.picUrl" alt="" />
            </van-swipe-item>
        </van-swipe> -->

        <ul
            @touchstart="touchStart"
            @touchmove="touchMove"
            @touchend="touchEnd"
            :style="activeStyle"
        >
            <li v-for="(item, index) in list" :key="index">
                <img :src="item.picUrl" alt="" />
            </li>
        </ul>
        <!-- <div class="swiper_dh"> -->
        <ol>
            <li @click="sign">
                <img src="../../../../public/1.png" alt="" />
                <p>签到</p>
            </li>
            <li @click="voucher">
                <img src="../../../../public/2.png" alt="" />
                <p>礼券</p>
            </li>
            <li @click="Bargaining">
                <img src="../../../../public/3.png" alt="" />
                <p>砍价</p>
            </li>
            <li @click="specialcolumn">
                <img src="../../../../public/4.png" alt="" />
                <p>专栏</p>
            </li>
        </ol>
        <!-- </div> -->
    </div>
</template>

<script>
import { getBanners } from "../../../utils/api";

export default {
    data() {
        return {
            list: [],
            activeStyle: {
                transition: "none",
                left: "-100%",
            },
            dir: "left", // 标记用户滑动的方向
            startPos: 0, // 记录用户触摸的开始点
            isWork: true, // 标记动画是否能够执行
        };
    },
    mounted() {
        getBanners().then((res) => {
            // console.log(res);
            this.list = res;
            // console.log(this.list.id);
        });
        this.touchEnd();
    },
    methods: {
        touchStart(e) {
            this.startPos = e.touches[0].pageX;
        },
        touchMove(e) {
            // console.log(e)
            if (e.touches[0].pageX - this.startPos > 0) {
                this.dir = "right";
            } else {
                this.dir = "left";
            }
        },
        touchEnd() {
            if (this.isWork) {
                this.isWork = false;

                setInterval(() => {
                    if (this.dir == "right") {
                        this.activeStyle = {
                            transition: "left 1s",
                            left: "0",
                        };

                        setTimeout(() => {
                            let item = this.list.pop();
                            this.list.unshift(item);
                            this.activeStyle = {
                                transition: "none",
                                left: "-100%",
                            };
                            this.isWork = true;
                        }, 1000);
                    } else {
                        this.activeStyle = {
                            transition: "left 1s",
                            left: "-200%",
                        };

                        setTimeout(() => {
                            let item = this.list.shift();
                            this.list.push(item);
                            this.activeStyle = {
                                transition: "none",
                                left: "-100%",
                            };
                            this.isWork = true;
                        }, 1000);
                    }
                }, 2000);

                if (this.dir == "right") {
                    this.activeStyle = {
                        transition: "left 1s",
                        left: "0",
                    };

                    setTimeout(() => {
                        let item = this.list.pop();
                        this.list.unshift(item);
                        this.activeStyle = {
                            transition: "none",
                            left: "-100%",
                        };
                        this.isWork = true;
                    }, 1000);
                } else {
                    this.activeStyle = {
                        transition: "left 1s",
                        left: "-200%",
                    };

                    setTimeout(() => {
                        let item = this.list.shift();
                        this.list.push(item);
                        this.activeStyle = {
                            transition: "none",
                            left: "-100%",
                        };
                        this.isWork = true;
                    }, 1000);
                }
            }
        },
        sign() {
            this.$router.push({ path: "/sign" });
        },
        voucher() {
            this.$router.push({ path: "/voucher" });
        },
        Bargaining() {
            this.$router.push({ path: "/allcut" });
        },
        specialcolumn() {
            this.$router.push({ path: "/specialcolumn" });
        },
    },
};
</script>

<style lang="scss">
.nav {
    position: relative;
    overflow: hidden;
    ul {
        width: 400%;
        position: relative;
        li {
            float: left;
            width: 25%;
            text-align: center;
            line-height: 55px;
            // background-color: blue;
            color: #fff;
            img {
                width: 100%;
                // height: 340px;
                height: 6rem;
            }
        }
    }
    ol {
        width: 100%;
        height: 1.8rem;
        background: white;
        position: absolute;
        // top: 252px;
        left: 0;
        bottom: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        text-align: center;
        border-radius: 35% 35% 0 0;
        border-bottom: 0.2rem solid #f5f5f5;
        li {
            width: 25%;
            img {
                width: 0.58rem;
                height: 0.58rem;
                display: block;
                margin: 0 auto;
            }
            p {
                font-size: 0.26rem;
                margin-top: 0.17rem;
            }
        }
    }
}
// .my-swipe .van-swipe-item {
//     color: #fff;
//     width: 100%;
//     height: 350px;
//     font-size: 20px;
//     line-height: 150px;
//     text-align: center;
// }

// }
</style>
